<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title> <!--jquery-->
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script> <!-- bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.js}"></script> <!-- layer -->
    <script type="text/javascript" th:src="@{/layer/layer.js}"></script><!-- common.js -->
    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <style>* {
        margin: 0;
        padding: 0;
        font-family: "Open Sans", sans-serif;
        text-transform: uppercase;
        letter-spacing: 3px;
        font-size: 11px;
    }

    body { /*background: #cbc0d3;*/
        background: #c9302c;
    }

    .main-header {
        width: 100%;
        height: 100px; /*background: #eac7cc;*/
        background: whitesmoke;
        display: block;
    }

    .navbar {
        display: inline-block;
        float: right;
        margin-right: 50px;
        margin-top: 30px;
    }

    .logo {
        display: inline-block;
        margin-top: 30px;
        margin-left: 30px;
        text-decoration: none;
    }

    .logo-lg {
        font-size: 20px;
        font-weight: lighter;
        color: #232324;
    }

    .logo-lg > b {
        font-size: 20px;
        font-weight: lighter;
        color: #232324;
    }

    .container {
        background: #FFFFFF;
        margin-right: auto;
        margin-left: auto;
        width: 900px;
    }

    .captcha {
        display: none;
    }

    .captchaImg {
        display: none;
        width: 130px;
        height: 32px;
    } </style>
</head>
<body> <!--抽取头部公共页面-->
<header id="site-header" class="main-header"> <!-- Logo --> <a class="logo" onclick="toList()"> <span
        class="logo-lg"><b>商品抢购</b></span> </a>
    <nav class="navbar navbar-static-top"> <!-- Sidebar toggle button--> <a href="#" class="sidebar-toggle"
                                                                            data-toggle="push-menu" role="button"> <span
            class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span
            class="icon-bar"></span> </a>
        <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">
                <li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <img
                        class="user-image" src="/imgs/user.png" height="32" alt="User Image"> <span
                        class="hidden-xs"></span> </a>
                    <ul class="dropdown-menu"> <!-- User image -->
                        <li class="user-header"><img class="img-circle" alt="User Image">
                            <p> Hello ABC - Hello ABC <small>Hello ABC</small></p></li> <!-- Menu Body -->
                        <li class="user-body"></li>
                        <li class="user-footer">
                            <div class="pull-middle"><a onclick="toOut()"
                                                        class="btn btn-lg btn-default btn-block">注销登录</a></div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</header>
<div class="panel panel-default">
    <div class="panel-heading" style="background: #c9302c;color: white">秒杀商品详情</div>
    <div class="panel-body"><span th:if="${user eq null}"> 您还没有登录，请登录后再操作<br/></span> <span>production 参数</span></div>
    <div class="container">
        <table class="table" id="good">
            <tr>
                <td>名称</td>
                <td colspan="3" id="goodName" th:text="${goods.goodsName}"></td>
            </tr>
            <tr>
                <td>图片</td>
                <td colspan="3"><img id="goodImg" th:src="@{${goods.goodsImg}}" width="200" heights="200"/></td>
            </tr>

            <tr>
                <td>秒杀开始时间</td>
                <td id="startTime" th:text="${#dates.format(goods.startDate,'yyyy-MM-dd HH:mm:ss')}"></td>
                <td id="seckillTip">
                    <input type="hidden" id="remainSeconds" th:value="${remainSeconds}"/>
                    <span th:if="${secKillStatus eq 0}">倒计时：
                        <span id="countDown" th:text="${remainSeconds}"> </span>秒
                    </span>
                    <span th:if="${secKillStatus eq 1}">秒杀火热进行中</span>
                    <span th:if="${secKillStatus eq 2}">秒杀已结束</span>
                </td>
                <td>
                    <!--                    <form id="secKillForm" method="post" action="/seckill/doSeckill">-->
                    <!--                        <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}"/>-->
                    <!--                        <button class="btn btn-primary btn-block" type="submit" id="buyButton">立即抢购</button>-->
                    <!--                    </form>-->
                    <input type="hidden" id="goodsId" name="goodsId" th:value="${goods.id}">
                    <button class="btn btn-primary btn-block" type="submit" onclick="getSecKillToken()" id="buyButton">
                        立即抢购
                    </button>
                </td>
            </tr>

            <tr>
                <td>秒杀价</td>
                <td id="secKillPrice" th:text="${goods.seckillPrice}"></td>
                <td><img id="captchaImg" class="captchaImg"/></td>
                <td><input id="captcha" class="captchaImg"/> <input type="button" id="captchabtn"
                                                                    onclick="verifyCaptcha()" value="验证码是否正确">
                </td>
            </tr>
            <tr>
                <td>原价</td>
                <td colspan="3" id="goodPrice" th:text="${goods.goodsPrice}"></td>
            </tr>
            <tr>
                <td>库存</td>
                <td colspan="3" id="stockCount" th:text="${goods.stockCount}"></td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    $(function () {
        countDown();
    });

    function countDown() {
        var remainSeconds = $("#remainSeconds").val();
        var timeout;
        //秒杀还未开始
        if (remainSeconds > 0) {
            $("#buyButton").attr("disabled", true);
            timeout = setTimeout(function () {
                $("#countDown").text(remainSeconds - 1);
                $("#remainSeconds").val(remainSeconds - 1);
                countDown();
            }, 1000);
        } else if (remainSeconds == 0) {
            //秒杀进行中
            if (timeout) {
                //清空计时器
                clearTimeout(timeout);
            }
            $("#seckillTip").html("秒杀火热进行中");

            //请求获取验证码
            $("#captchaImg").attr("src", "/seckill/captcha?goodsId=" + $("#goodsId").val());
            $("#captchaImg").show();
            $("#captcha").show();

        } else {
            $("#buyButton").attr("disabled", true);
            $("#seckillTip").html("秒杀已结束");
        }
    }

    function verifyCaptcha() {
        var goodsId = $("#goodsId").val();
        var captcha = $("#captcha").val();
        $.ajax({
            url: "/seckill/verifyCaptcha",
            type: "GET",
            data: {
                goodsId: goodsId,
                captcha: captcha
            },
            success: function (data) {
                if (data === true) {
                    layer.msg("验证码输入正确");
                } else {
                    layer.msg("验证码输入有误");
                }
            },
            error: function () {
            }
        })

    }

    function getSecKillToken() {
        var goodsId = $("#goodsId").val();
        var captcha = $("#captcha").val();
        $.ajax({
            url: "/seckill/token",
            type: "GET",
            data: {
                goodsId: goodsId,
                captcha: captcha
            },
            success: function (data) {
                if (data.code == 200) {
                    //取出服务器返回的随机生成的路径
                    var token = data.obj;
                    doSecKill(token);
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.msg("客户端请求错误");
            }
        })
    }

    //携带秒杀生成的路径, 秒杀商品
    function doSecKill(token) {
        $.ajax({
            url: '/seckill/' + token + '/doSeckill',
            type: 'POST',
            data: {goodsId: $("#goodsId").val()},
            success: function (data) {
                if (data.code == 200) {
                    layer.msg("秒杀结果");
                } else {
                    layer.msg(data.message);
                }
            },
            error: function () {
                layer.msg("客户端请求错误！", {time: 2000});
            }
        });
    }
</script>
</html>